<template>
  <div class="set-video">
    <div class="video-cont">
      <div class="spans">
        <span>视频：</span>
      </div>
      <div class="btn">
        <span>添加视频</span>
      </div>
      <div class="hint">
        <span>建议尺寸：690*388</span>
      </div>
    </div>
    <div class="video-cont">
      <div class="spans">
        <span>封面图：</span>
      </div>
      <div class="btn" @click="showImg = true">
        <span>添加图片</span>
      </div>
      <div class="hint">
        <span>建议尺寸：690*388</span>
      </div>
    </div>
    <div class="video-cont">
      <div class="spans">
        <span>视频地址：</span>
      </div>
      <input type="text" v-model="setvideo.videoUrl" />
    </div>
    <UploadImages @closeModel="closeModel" :dialogVisible="showImg"></UploadImages>
  </div>
</template>

<script>
import UploadImages from "@/components/UploadImages/UploadImages";
import { mapGetters } from "vuex";
export default {
  components: {
    UploadImages
  },
  computed: {
    ...mapGetters(["setvideo", "ImgUrl"])
  },
  data() {
    return {
      showImg: false
    };
  },
  watch: {
    setvideo: {
      handler(oldVal, newVal) {
        // 更新vuex里面的PageJSON
        this.$store.dispatch("apply/PageJSONUpData");
        // 更新父组件中的PageJSON
        this.$emit("updataNowPageJSON", newVal);
      },
      deep: true
    },
    ImgUrl: function() {
      this.setvideo.imgUrl = this.ImgUrl;
    }
  },
  methods: {
    closeModel() {
      this.showImg = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.set-video {
  width: 100%;
  height: 300px;
  padding: 10px 0 0 40px;
  .video-cont {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 300px;
    height: 50px;
    padding: 10px 0;
    font-size: 14px;
    font-family: STHeitiSC;
    font-weight: 300;
    color: rgba(53, 53, 53, 1);
    .spans {
      width: 70px;
      height: 30px;
      text-align: right;
      line-height: 30px;
    }
    .btn {
      margin-left: 5px;
      width: 88px;
      height: 28px;
      border-radius: 2px;
      border: 1px solid rgba(223, 223, 223, 1);
      text-align: center;
      line-height: 28px;
    }
    .hint {
      height: 30px;
      line-height: 30px;
      margin-left: 10px;
    }
    input {
      width: 220px;
      margin-left: 5px;
      border-radius: 2px;
      border: 1px solid rgba(224, 225, 232, 1);
    }
  }
}
</style>
